<template>
    <div class="template-index-Lu">
        <commpVxeTable
        :key="reCommpVxeTable"
        :conditionBtnRow="true"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
            <template>
                <a-button class="blue-btn" @click="clickAdd" icon="plus">添加</a-button>
            </template>
            </vxe-form-item>
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline">
                <a-form-item>
                    <a-button class="blue-btn" @click="warehousing(row)" icon="import">入库</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button class="blue-btn" @click="storageLog(row)" icon="file-sync">出入库记录</a-button>
                </a-form-item>
            </a-form>
        </template>
        </commpVxeTable>
        <a-modal
            title="入库"
            :visible="warehousingVisible"
            @ok="handleOk"
            @cancel="handleCancel"
            >
            <a-form>
                <a-form-item :label="warehousingName + '新增入库'">
                    <a-input-number v-model="warehousingNumber" :min="1" style="width:100%;"></a-input-number>
                </a-form-item>
            </a-form>
        </a-modal>
        <applicationForm ref="applicationTable" @success="success"></applicationForm>
        <inoutStorageLogsModal ref="inoutStorageLogsModalRef" :fkcid="fkcid"></inoutStorageLogsModal>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import applicationForm from './applicationForm'
import inoutStorageLogsModal from './in-outStorageLogs'
import { edit } from './service/index'
export default {
    components: {
        commpVxeTable,
        applicationForm,
        inoutStorageLogsModal
    },
    data() {
        return {
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.list,
                rowId: 'id',
                urlType: true,
                paramet: {}
            },
            columnsVxe: [
                {
                type: 'checkbox',
                width: 60,
                fixed: 'left'
                },{
                title: '物品编号',
                field: 'fwpbh',
                },{
                title: '物品名称',
                field: 'fwpmc',
                },{
                title: '物品数量',
                field: 'fwpsl',
                width: 100,
                },{
                title: '单位',
                field: 'fdw',
                width: 100,
                titleInterval:true,
                slots: {
                    header:'data1_header',
                }
                },{
                title: '操作',
                field: 'jobid',
                width: 230,
                titleInterval:true,
                slots: {
                // 使用插槽模板渲染
                    header:'data2_header',
                    default: 'operation_btn',
                },
                }
            ],
            formItem: [
                {
                label: '物品名称',
                model: 'fwpmc',
                },
            ],
            idList: [],
            formData: {},
            warehousingVisible: false,
            warehousingName: '',
            warehousingId: '',
            warehousingNumber: null,
            fkcid: '',
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
        //console.log('已选择',val)
        this.idList = []
        if(val.length){
            val.forEach(item => {
                this.idList.push(item.id)
            });
        }
        },
        // 搜索
        searchEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        },
        // 重置
        resetEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        },
        clickAdd(){
        this.$nextTick(()=> {
            this.$refs.applicationTable.applicationTableVisible = true
        })
        },
        // 入库
        warehousing(row){
            //console.log(row)
            this.warehousingName = row.fwpmc
            this.warehousingId = row.id
            this.warehousingVisible = true
        },
        handleOk(){
            let data = {
                fxzsl: this.warehousingNumber,
                id: this.warehousingId
            }
            edit(data).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.reCommpVxeTable = Date.now()
                    this.handleCancel()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        handleCancel(){
            this.warehousingVisible = false
            this.warehousingName = ''
            this.warehousingId = ''
            this.warehousingNumber = null
        },
        storageLog(row){
            this.fkcid = row.id
            this.$nextTick(_ => {
                this.$refs.inoutStorageLogsModalRef.inoutStorageLogsVisible= true
            })
        },
        // 弹窗提交成功
        success(){
        // 刷新表格 清空id数组
        this.$refs.administrativeOffice.resetEvent()
        this.jobidList = []
        },
    }
}
</script>
<style>
@import url('../../css/oaLess.css');
</style>

